[TOC]
{:toc}

1 Babel

1.1 为什么要用这个？

  • 目前各大浏览器对ES2015+ 的支持参差不齐，需要一个统一的转换工具来将ES6+的代码转成浏览器都支持的ES5的代码，以便适配是有运行环境。这就需要一个代码转换工具，刚开始的时候出现和好些个类似的代码转换工具，到最后慢慢的就剩下Babel的声音了。

1.2 能做哪些事？

  • 代码转换，通过不同插件来对不同新功能的代码转换做相应的支持，比如ES6，React等
  • 代码填充，上面的只是对代码做翻译，这里是对ES5没有的代码，而ES6+有的对象和API做补充实现。
  • 代码映射，转换后的代码跟转换前的代码的映射，方便调试。

1.3 如何安装

  • 这里 有对各种环境下使用babel的配置说明。

1.4 相关介绍

  • babel-cli 主要包含babel 的可执行文件，包含babel命令和babel-node这个交互环境
  • babel-register 是一个对require的装饰版本，可以直接引用相应的模块，并自动转码
  • babel-core 整个转码的主体工具，包含解析，转义和代码生成。
  • babel-polyfill 整个新特性的对象和API的补充实
  • 相关插件的介绍 详情参考

1.5 注意事项

  • babel 推荐项目本地安装而不是全局安装，这样项目之间的babel版本可以独立不一致

    1
    npm install babel-cli --save-dev 
    1
    2
    3
    4
    #package.json
    "scripts":{
      "build":"babel src -d lib"
    }
    1
    npm run build

  • babel 相关的配置选项可以砸命令行中指定，更推荐的是配置的形式，放入项目根目录下的.babelrc,详细配置

    1
    2
    3
    {
      "presets":["env","react"]
    }

    并确保在项目的依赖中安装了相应的依赖包

  • 一个比较懒的方法是包含babel-preset-env插件来包含所有相关的插件的最新版本，同时配置更加灵活

  • babel多用来多ES6+的代码进行转码，但模块化的代码是需要支持ES5 和ES6+的语法，也就是CMD的模块和ES6的模块引入的方式都是需要支持的,输出的代码需要支持require 和 import

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const PI = 3.14
    let square = edge => edge * edge
    export default {
      PI,
      square
    }

    export {
      PI,
      square
    }

    ​

2 参考资料

  1. babel github
  2. babel英文手册
  3. babel中文手册
  4. babel入门教程

最后更新： 2022年03月02日 03:32

原始链接： http://rawbin-.github.io/dev-tools/2016-09-25-fe-project-tools-babel/

赏
× 赞赏这个人~
打赏二维码